<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F5F5F5;
            background-size: cover;
        }

        #desc {
            position: absolute;
            top: 5px;
            left: 5px;
        }

        #container {
            border: 1px solid deeppink;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- <div id="desc"><img src="./images/张飞.png" alt=""></div> -->
    <!-- <div>
            Try to drag the block around.
        </div>
        <div>Via <a href="https://konvajs.github.io" target="blank">Konva.js<a></div> -->
    <script>
        var width = window.innerWidth;
        var height = window.innerHeight;
        var shadowOffset = 20;
        var tween = null;
        var blockSnapSize = 100;
        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });
        var gridLayer = new Konva.Layer();
        var layer = new Konva.Layer();
        var shadowRectangle = new Konva.Rect({
            x: 0,
            y: 0,
            width: blockSnapSize,
            height: blockSnapSize,
            fill: '#FF7B17',
            opacity: 0,
            stroke: '#CF6412',
            strokeWidth: 3,
            dash: [20, 2]
        });

        function newRectangle(width, height, x, y, layer, stage) {
            let rectangle = new Konva.Rect({
                x: x,
                y: y,
                width: width,
                height: height,
                fill: '#ccc',
                stroke: '#ddd',
                strokeWidth: 1,
                shadowColor: 'black',
                shadowBlur: 2,
                shadowOffset: { x: 1, y: 1 },
                shadowOpacity: 0.4,
                draggable: true
            });
            rectangle.on('dragstart', (e) => {

                shadowRectangle.show();
                shadowRectangle.moveToTop();
                rectangle.moveToTop();
            });
            rectangle.on('dragend', (e) => {
                rectangle.position({
                    x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
                    y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
                });
                stage.batchDraw();
                shadowRectangle.hide();
            });
            rectangle.on('dragmove', (e) => {
                shadowRectangle.position({
                    x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
                    y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
                });
                stage.batchDraw();
            });
            layer.add(rectangle);
        }
        function createLine() {
            var padding = blockSnapSize;
            for (var i = 0; i < width / padding; i++) {
                gridLayer.add(new Konva.Line({
                    points: [Math.round(i * padding) + 0.5, 0, Math.round(i * padding) + 0.5, height],
                    stroke: '#ddd',
                    strokeWidth: 1,
                }));
            }
            gridLayer.add(new Konva.Line({ points: [0, 0, 10, 10] }));
            for (var j = 0; j < height / padding; j++) {
                gridLayer.add(new Konva.Line({
                    points: [0, Math.round(j * padding), width, Math.round(j * padding)],
                    stroke: '#ddd',
                    strokeWidth: 0.5,
                }));
            }
            shadowRectangle.hide();
            layer.add(shadowRectangle);
        }
        createLine()
        // newRectangle(200,200,blockSnapSize*2 , blockSnapSize*2 , layer, stage);
        // newRectangle(100,100,blockSnapSize , blockSnapSize , layer, stage);
        // newRectangle(100,100,blockSnapSize , blockSnapSize , layer, stage);
        // newRectangle(100,100,blockSnapSize , blockSnapSize , layer, stage);
        // newRectangle(100,100,blockSnapSize , blockSnapSize , layer, stage);


        function createImage(width, height, url) {
            var imageObj = new Image();
            imageObj.onload = function () {
                var yoda = new Konva.Image({
                    x: 150,
                    y: 150,
                    image: imageObj,
                    width: width,
                    height: height,
                    draggable: true
                });

                yoda.on('dragstart', (e) => {

                    shadowRectangle.show();
                    shadowRectangle.moveToTop();
                    yoda.moveToTop();
                });
                yoda.on('dragend', (e) => {
                    yoda.position({
                        x: Math.round(yoda.x() / blockSnapSize) * blockSnapSize,
                        y: Math.round(yoda.y() / blockSnapSize) * blockSnapSize
                    });
                    stage.batchDraw();
                    shadowRectangle.hide();
                });
                yoda.on('dragmove', (e) => {
                    shadowRectangle.position({
                        x: Math.round(yoda.x() / blockSnapSize) * blockSnapSize,
                        y: Math.round(yoda.y() / blockSnapSize) * blockSnapSize
                    });
                    stage.batchDraw();
                });
                layer.add(yoda);
                stage.batchDraw();
            };
            imageObj.src = url;
        }
        function createBackground(url) {
            var imageObj = new Image();
            imageObj.onload = function () {
                var yoda = new Konva.Image({
                    x: width/2-180,
                    y: height/2-276,
                    image: imageObj,
                    width: 440,
                    height: 540,
                   
                });

              
                layer.add(yoda);
                stage.batchDraw();
            };
            imageObj.src = url;
        }
        

        stage.add(gridLayer);
        stage.add(layer);
    </script>
    </div>
</body>

</html>